import React from "react";
import Reflux from "reflux";
import {Form} from "antd";

import {createAction} from "./Action";
import Store from "./Store";
import "./style.less";
import {LdhDetailForm, LdhDetailPage} from "@biz/PageCompnents";
import {LdhButton, LdhFormItem, LdhFormItemTip, LdhPassword} from "@biz/Components";
import GUtils from "@/utils";

const FormItem = Form.Item;

export default class ResetPwdPage extends Reflux.Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.action = createAction()
        this.store = new Store(props, this.action)
    }

    componentWillUnmount() {
        this.store.stopListeningToAll()
    }

    handleSubmit(){
        this.formRef.current.validateFields().then((values) => {
            console.log(values);
            GUtils.confirm("确认","确定要修改密码吗?",()=>{
                this.action.resetPwd(values);
            });

        });

    }
    render() {
        let {loading} = this.state;
        return <LdhDetailPage className="reset-pwd-page" title="修改密码">
            <LdhDetailForm onSubmit={this.handleSubmit.bind(this)} labelWidth="180px"
                           ref={this.formRef} loading={loading} requiredMark={true} isDetail={false}>

                <LdhFormItem label="旧密码" name="oldPwd" required>
                    <LdhPassword/>
                </LdhFormItem>
                <LdhFormItem label="新密码"  name="newPwd" rules={[
                    {
                        validator: (rule, newValue) => {
                            if(!newValue||newValue.length<8){
                                return Promise.reject(new Error('密码长度至少8位!'));
                            }
                            if(!window.CONFIG.REG_PWD.test(newValue)){
                                return Promise.reject(new Error('新密码不符合要求!'));
                            }
                            return Promise.resolve();
                        }
                    }
                ]}>
                    <LdhPassword/>
                </LdhFormItem>
                <LdhFormItemTip>最小长度为8位，且包含数字，大小写字母，特殊字符@$!%*#?&+=</LdhFormItemTip>
                <LdhFormItem label="确认密码"  name="newPwd2"  rules={[
                    {required:"true", message:"请再次输入密码"},
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('newPwd') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('两次输入的密码不一致!'));
                        },
                    }),
                ]}>
                    <LdhPassword/>
                </LdhFormItem>

                <div className="btn-row">
                    <LdhButton className="submit-btn" htmlType="submit" type="primary" >修改</LdhButton>
                </div>

            </LdhDetailForm>
        </LdhDetailPage>
    }
}